<!-- @format -->

<template>
	<view class="l-cell">
		<view class="l-cell-box" @click="change">
			<view class="l-cell-box-content">
				<view class="l-cell-box-content-box">
					<l-icon class="left-icon" v-if="icon" :name="icon" :size="iconSize" :color="iconColor" />
					<text>{{ title }}</text>
				</view>
				<view class="l-cell-content-box">
					<text>{{ value }}</text>
					<l-icon class="right-icon" v-if="isLink || righticon" :name="righticon" :size="righticonSize" :color="righticonColor" />
				</view>
			</view>
		</view>
		<view :animation="animationData" class="l-cell-itembox">
			<slot />
		</view>
	</view>
</template>

<script>
	import props from "./props.js";
	export default {
		name: "l-cell",
		mixins: [props],
		data() {
			return {
				itemBoxHeight: 0,

				animationData: {},
				// 是否打开
				isopen: false,
			};
		},
		mounted() {
			this.init();
		},
		methods: {
			// 初始化
			async init() {
				this.itemBoxHeight = await this.queryheight();
				if (this.itemBoxHeight == 0) return;
				var animation = uni.createAnimation({ duration: 500, timingFunction: "ease" });
				this.animation = animation;
				animation.height(0).opacity(1).step();
				this.animationData = animation.export();
			},
			// 打开折叠
			async open() {
				this.animation.height(this.itemBoxHeight + 5).step();
				this.animationData = this.animation.export();
			},
			// 关闭折叠
			async close() {
				this.animation.height(0).step();
				this.animationData = this.animation.export();
			},
			// 查询节点高度
			async queryheight() {
				return new Promise((resolve) => {
					{
						const rectinfo = uni.createSelectorQuery().in(this);
						rectinfo
							.select(".l-cell-itembox")
							.boundingClientRect((data) => {
								resolve(data.height);
							})
							.exec();
					}
				});
			},
			// 折叠打开事件
			change() {
				this.$emit("click");
				if (this.itemBoxHeight == 0) return;
				this.isopen = !this.isopen;
				this.isopen ? this.open() : this.close();
			},
		},
	};
</script>

<style lang="scss" scoped>
	.l-cell-box {
		border-bottom: 1px solid $l-border-color;
		padding: 10px 5px;

		&:active {
			background-color: $l-bg-color;
		}

		&-content {
			@include grid-col(1fr auto);
			align-items: center;

			&-box {
				display: flex;

				.left-icon {
					margin-right: 5px;
				}

				.right-icon {
					margin-left: 5px;
				}
			}
		}
	}

	.l-cell-itembox {
		overflow: hidden;
		opacity: 0;
	}
</style>
